<template>
  <BasicDrawer width="600px" title="订单详情" @register="register">
    <a-descriptions bordered :labelStyle="{ width: '150px' }" :column="1" size="small">
      <a-descriptions-item label="商户订单号">{{ info?.outTradeNo }}</a-descriptions-item>
      <a-descriptions-item label="系统订单号">{{ info?.orderNo }}</a-descriptions-item>
      <a-descriptions-item label="代付金额">{{ info?.amount }}</a-descriptions-item>
      <a-descriptions-item label="通道类型">{{ info?.codeTitle }}</a-descriptions-item>
      <a-descriptions-item label="收款姓名">{{ info?.payName }}</a-descriptions-item>
      <a-descriptions-item label="收款账号">{{ info?.payAccount }}</a-descriptions-item>
      <a-descriptions-item label="银行名称：">{{ info?.bankName }}</a-descriptions-item>

      <a-descriptions-item label="佣金/费率"
        >{{ info?.agentGain }}/{{ info?.agentRate }}</a-descriptions-item
      >
      <a-descriptions-item label="代付状态">
        <a-tag :color="info.payStatus == 0 ? 'blue' : info.payStatus == 1 ? 'blue' : ''">{{
          formatPayStatus(info?.payStatus)
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="回调状态">
        <a-tag :color="info?.callbackStatus == 0 ? 'red' : 'blue'">{{
          info?.callbackStatus == 0 ? '未回调' : '已回调'
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="代理结算状态"
        ><a-tag :color="info.settlement == 0 ? 'blue' : info.settlement == 1 ? 'blue' : ''">{{
          formatSettlement(info?.settlement)
        }}</a-tag></a-descriptions-item
      >

      <a-descriptions-item label="代理付款姓名">{{ info?.name }}</a-descriptions-item>
      <a-descriptions-item label="代理付款账号">{{ info?.account }}</a-descriptions-item>

      <a-descriptions-item label="创建时间">{{
        dayjs(info?.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
      }}</a-descriptions-item>
      <a-descriptions-item label="抢单时间">{{
        info?.checkTime ? dayjs(info?.checkTime * 1000).format('YYYY-MM-DD HH:mm:ss') : '-'
      }}</a-descriptions-item>
      <a-descriptions-item label="回调时间">{{
        info?.callbackTime ? dayjs(info?.callbackTime * 1000).format('YYYY-MM-DD HH:mm:ss') : '-'
      }}</a-descriptions-item>
      <a-descriptions-item label="余额结算时间">{{
        info?.refundTime ? dayjs(info?.refundTime * 1000).format('YYYY-MM-DD HH:mm:ss') : '-'
      }}</a-descriptions-item>
      <a-descriptions-item label="备注信息"> {{ info?.remark }} </a-descriptions-item>
      <a-descriptions-item label="收款二维码">
        <a-image :width="64" :src="info?.payImgSrc" />
      </a-descriptions-item>
      <a-descriptions-item label="代理付款转账凭证">
        <a-space>
          <template v-for="(item, i) in info?.agentImgSrc" :key="i">
            <a-image :width="64" :src="item" />
          </template>
        </a-space>
      </a-descriptions-item>
    </a-descriptions>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  // import { getOrderStatus, getOrderColor } from '@/utils/order';
  import { GrabOrderInfoApi } from '@/api/payment';
  import dayjs from 'dayjs';

  const info = ref({
    collectionInput: [],
    paymentInfo: [],
  });

  const [register] = useDrawerInner(async (data) => {
    const res = await GrabOrderInfoApi({ orderNo: data.record.orderNo });
    info.value = res;
  });
  const formatPayStatus = (status) => {
    const statusText = ['未支付', '已支付', '无信息'];
    return statusText[status];
  };

  const formatSettlement = (status) => {
    const statusText = ['未结算', '已结算', '代理反扣', '系统返款', '追扣中', '追扣失败'];
    return statusText[status];
  };
  // function formatInput(info) {
  //   console.log(info);
  //   let text = '';
  //   if (!Array.isArray(info) || info.length <= 0) return '';
  //   info.forEach((element) => {
  //     text += element.title + ':' + element.value + '<br/>';
  //   });
  //   return text;
  // }
</script>
